<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>loading.scss</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="../../../../../../css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../../../../../css/main.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../../../../../css/github.css" type="text/css" media="screen" />
<script src="../../../../../../js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/jquery-effect.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/main.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/highlight.pack.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
    <div class="banner">
        
        <h1>
            loading.scss
        </h1>
        <ul class="files">
            
            <li>
                lib/assets/stylesheets/ems_app/common/loading.scss
                
            </li>
            <li>Last modified: 2017-02-22 17:27:55 +0800</li>
        </ul>
    </div>

    <div id="bodyContent">
        <div id="content">
  
    <div class="description">
      
<p>.loading-view-wrap{</p>

<pre><code>width: 100%;
height: 100%;</code></pre>

<p>}</p>

<p>.loading-view{</p>

<pre><code>position: relative;
width: 150px;
margin: 273px auto 0 auto;</code></pre>

<p>}</p>

<p>.message{</p>

<pre><code>width: 100px;
position: absolute;
top: 40px;
left: 18px;
color: #989292;
font-size: 14px;
text-align: center;</code></pre>

<p>}</p>

<p>.spinner{</p>

<pre><code>position: relative;
width: 110px;
height: 50px;
margin: 0 auto;
.spinner-container{
  width: 100px;
  height: 100px;
  position: absolute;

  &amp;.container2{
    transform: rotateZ(136deg);
  }

  .fa-circle{
    position: absolute;
    color: rgba(132, 129, 126, 0.23);
    font-size: 1.5rem;
    animation: move 1.2s infinite ease-in-out;
  }

  @keyframes move{
    0%, 80%, 100% {transform: scale(0.0);}
    40% {transform: scale(1.0);}
  }

  &amp;.container1{
    .circle2{animation-delay: -0.2s; }
    .circle3{animation-delay: -0.4s; }
    .circle4{animation-delay: -0.6s; }
  }

  &amp;.container2{
    .circle1{animation-delay: -0.3s; }
    .circle2{animation-delay: -0.5s; }
    .circle3{animation-delay: -0.7s; }
    .circle4{animation-delay: -0.1s; }
  }

  .circle1{
    top: 0;
    left: 0;
  }

  .circle2{
    top: 0;
    right: 0;
  }

  .circle3{
    bottom: 0;
    right: 0;
  }

  .circle4{
    bottom: 0;
    left: 0;
  }
}</code></pre>

<p>}</p>

<p>loading-position{</p>

<pre><code>position: absolute;
width: 100%;
height: 100%;
top: 0;
background: #292626;
opacity: 0.5;</code></pre>

<p>}</p>

    </div>
  


  


  
  


  


  

  



  

    

    

    


    


    <!-- Methods -->
              </div>

    </div>
  </body>
</html>
